<template>
  <div class="nav_outer">
    <Header tooltext="保存" @herttool="saveovertime">请假</Header>
    <div class="content">
        <div style="background:#fff;">
            <div class="inputwrap">
                <div>请假时长</div>
                <div class="inputarea">
                    <input type="text" placeholder="请输入" v-model="overTime">
                    <span>小时</span>
                </div>
            </div>
            <div class="chooses" style="padding-bottom:1px;margin:0 .8rem;">
                <div class="choose typechoose">
                    <div :class="{'on':tag==1}" @click="tag=1">早班</div>
                    <div :class="{'on':tag==2}" @click="tag=2">白班</div>
                    <div :class="{'on':tag==3}" @click="tag=3">中班</div>
                    <div :class="{'on':tag==4}" @click="tag=4">晚班</div>
                    <div :class="{'on':tag==5}" @click="tag=5">夜班</div>
                </div>
                <div class="choose beichoose">
                    <div :class="{'on':leaveType==1}" @click="leaveType=1">事假</div>
                    <div :class="{'on':leaveType==2}" @click="leaveType=2">病假</div>
                    <div :class="{'on':leaveType==3}" @click="leaveType=3">调休</div>
                    <div :class="{'on':leaveType==4}" @click="leaveType=4">其他</div>
                    <div :class="{'on':leaveType==5}" @click="leaveType=5">带薪休假</div>
                </div>
                <div></div>
            </div>
        </div>
        <div class="remark">
          <span style="color:#406FFF;font-size:1.2em;" @click="chooseDate">{{showDate}}</span>
          <span @click="addRemark=!addRemark" style="color:#999;font-size:.9em;margin-left:1em;">点击添加备注</span>
          <textarea name="" id="" cols="30" rows="5" v-show="addRemark" v-model="remarks"></textarea>
        </div>
        
    </div>
    <div class="switch" @click="switchrec">切换</div>
    <div class="bg" style="position:absolute;width:100%;left:0;top:0;bottom:0;background:#fff;z-index:-1;"></div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      addRemark:false,
      overTime: '',
      tag: 1,
      leaveType: 1,
      overTimeDate: '',
      showDate: '',
      remarks: '',
      id: ''
    }
  },
  created(){
    let id = this.id = this.$route.query.id;
    if(id){
      this.loadDetail(id);
    }else{
      let date = new Date();
      this.overTimeDate = date.getFullYear()+'-'+(1+date.getMonth())+'-'+date.getDate();
      this.showDate = (1+date.getMonth())+'月'+date.getDate()+'日';
    }
  },
  mounted() {
    let mui = this.mui;
    this.dtPicker = new mui.DtPicker({type:'date'}); 
  },
  methods: {
    saveovertime(){
     if(!this.overTime){
       this.mui.toast('请输入请假时长');
       return
     }
     let type = this.id ? 'jsonput' : 'jsonpost';
     let data = {
        overTime: this.overTime,
        overTimeDate: this.overTimeDate.indexOf('00:00:00')>-1 ? this.overTimeDate : (this.overTimeDate+' 00:00:00'),
        tag: this.tag,
        leaveType: this.leaveType,
        remarks: this.remarks,
        type: 2//请假
      };
      this.id && (data.id=parseInt(this.id));
     this.Http[type]("/yzj/app/over_time", JSON.stringify(data)).then(res => {
        this.mui.toast('保存成功');
        this.$router.back();
      });
   },
   switchrec(){
     this.$router.replace('/addovertime');
   },
   chooseDate(){
     let that = this;
      this.dtPicker.show(function (selectItems) { 
        that.overTimeDate = selectItems.value;
        let arr = selectItems.value.split('-');
        that.showDate = arr[1]+'月'+arr[2]+'日';
      })
   },
   loadDetail(id){
     this.Http.get(`/yzj/app/over_time/${id}`, null).then(res => {
        this.remarks = res.remarks;
        this.overTimeDate = res.overTimeDate.split(' ')[0];
        let arr = this.overTimeDate.split('-');
        this.showDate = arr[1]+'月'+arr[2]+'日';
        this.tag = res.tag;
        this.leaveType = res.leaveType;
        this.salaryMultiple = res.salaryMultiple;
        this.overTime = res.overTime;
        this.addRemark = !!res.remarks;
      });
   }
  },
  components: {
    Header
  }
}
</script>

<style scoped lang='scss'>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .switch{
        position: fixed;
        color: #406FFF;
        border: 1px solid #406FFF;
        border-radius: 2px;
        top: 0.8rem;
        line-height:1.2;
        left: 56%;
        z-index: 990;
        padding: 0 1px;
        background: #fff;
        font-size:0.6em;
    }
  .content{
    .inputwrap{
        border-bottom: 1px solid #BFBFBF;
        display: flex;
        align-items: center;
        color: #406FFF;
        font-size: 16px;
        margin: 0 px2em(30);
    }
    .inputarea{
        flex: 1;
        text-align: right;
        input{
            width: px2em(200);
        }
    }
    .choose{
        font-size: 10px;
        padding: 0 px2em(30);
        margin: px2em(60) 0;
        display: flex;
        justify-content: space-between;
        &>div{
            padding: 1px px2em(20);
            border-radius: 5px;
            border: 1px solid #999;
        }
    }
    .typechoose>div{
        color: #2B6CD9;
        &.on{
            color: #fff;
            background: #2B6CD9;
        }
    }
    .beichoose>div{
        color: #E7AA34;
        &.on{
            color: #fff;
            background: #E7AA34;
        }
    }
    .remark{
        padding: px2em(30) px2em(60);
    }
  }
</style>